<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../lib/reset.css">
	<style>
		body {
			background-color: #ccc;
		}

		.tab {
			width: 500px;
			height: 300px;
			background-color: #fff;
			margin: 20px auto;
		}

		.tab .tab-header {
			overflow: hidden;
		}

		.tab .tab-header li {
			float: left;
			width: 60px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			margin-right: 10px;
			background-color: #aaa;
		}

		.tab .tab-header li.active {
			background-color: red;
			color: #fff;
		}

		.tab .tab-body {
			height: 265px;
			overflow: hidden;
		}

		.tab .tab-body div {
			display: none;
		}

		.tab .tab-body div.active {
			display: block;
		}

	</style>

	<script type="text/javascript">
		
	</script>
</head>
<body>
	
	<div class="tab">
		<ul id="tabHeader" class="tab-header">
			<li class="active">item1</li>
			<li>item2</li>
			<li>item3</li>
			<li>item4</li>
			<li>item5</li>
			<li>item6</li>
		</ul>
		<div id="tabBody" class="tab-body">
			<div class="active">
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
				<h1>tab body1</h1>
			</div>
			<div>tab body2</div>
			<div>tab body3</div>
			<div>tab body4</div>
			<div>tab body5</div>
			<div>tab body6</div>
		</div>
	</div>

	<script type="text/javascript">
	var tabHeader = document.getElementById('tabHeader');
	var tabBody = document.getElementById('tabBody');
	var lis = tabHeader.getElementsByTagName('li');
	var divs = tabBody.getElementsByTagName('div');

	for (var i=0; i<lis.length; i++) {
		lis[i].setAttribute('index', i);
		lis[i].onclick = onLiClick;
		/*lis[i].onclick = function() {
			this.className = 'active';
		}*/
	}

	function onLiClick() {
		// var id = this.id; // OK
		var index = this.getAttribute('index');
		// console.log(index)

		for (var i=0; i<lis.length; i++) {
			lis[i].className = '';
			divs[i].style.display = 'none';
			// console.log(i)
		}
		this.className = 'active';
		divs[index].style.display = 'block';
	}

	</script>
</body>
</html>